<template>
  <div>
    <!--布局1: 方形底色 + 数字进度-->
    <div v-if="loadObj.isShow && loadObj.layout == 'square'" class="abs zx100 trbl0 f ac xc fs14" style="background-color: rgba(0,0,0,.3);">
      <div class="rds10 f ac xc" :style="{background:'rgba(10,6,0,.6)',maxWidth:'192px',maxHeight:'155px',width: '192px', aspectRatio: '123/100'}">
        <div>
          <div class="f ac xc">
            <div class="fs40" style="color:#ec6102;">{{ ~~(Number(loadObj.percent) > 100 ? 100 : Number(loadObj.percent)) }}<span class="fs14 pl2" style="transform:translateY(10px);">%</span></div>
          </div>
          <div class="gf tc">{{ loadObj.text }}</div>
        </div>
      </div>
    </div>
    <!--布局2：环形loading + 数字进度-->
    <div v-if="loadObj.isShow && loadObj.layout == 'circle'" class="abs zx100 trbl0 f ac xc fs14" style="background:rgba(10,6,0,.4)">
      <div class="renderloading"></div>
      <div class="abs l50 t50 txy-50" style="margin-left:2px;">
        <div class="fs26 tc pb5" style="color:#ec6102;line-height:1;">{{ ~~(Number(loadObj.percent) > 100 ? 100 : Number(loadObj.percent)) }}<span class="fs12 pl2" style="transform:translateY(10px);">%</span></div>
        <div class="gf tc" style="font-size:10px;line-height:1;">
          {{ loadObj.text }}
        </div>
      </div>
    </div>
  </div> 
</template>
<script src="./index.js"></script>
<style src="./index.css" scoped></style>